<template>
  <div class="bg carReserve-container">

    <!-- 搜索框 -->
    <div style="margin-bottom: 10px;">
      <el-input style="width: 200px" placeholder="查询车辆" prefix-icon="el-icon-truck"
                v-model="searchNumber" clearable></el-input>
    </div>

    <!-- 课程卡片展示区域 -->
    <div style="display: flex; flex-wrap: wrap; height: 85vh; overflow: auto">
      <el-card
          v-for="(item) in filteredCar"
          :key="item.id"
          style="width: calc(33.33% - 10px); margin-right: 10px; margin-bottom: 10px; height: 330px">
        <div style="display: flex; flex-direction: column; justify-content: space-between;">
          <el-image v-if="item.image" :src="item.image" alt=""
                    style="width: 100%; height: 200px;"
                    :preview-src-list="[item.image]"></el-image>
          <el-tag v-else style="width: 100%; height: 200px;
          display: flex; justify-content: center; align-items: center; font-size: 20px">
            暂未上传
          </el-tag>
          <div style="display: flex; flex-wrap: nowrap; justify-content: space-between;">
            <h4 v-html="highlightNumber(item.number)"></h4>
            <p>{{ item.brand }}</p>
            <p>{{ item.model }}</p>
            <p>{{ item.coach }}</p>
          </div>
        </div>
        <!-- 添加查看详情按钮 -->
        <div style="display: flex; justify-content: space-between;">
          <p :class="{'green-text': item.state === '可预约',
            'yellow-text': item.state === '维护中',
            'red-text': item.state === '不可用'}">{{ item.state }}</p>
          <el-button type="text" @click="showDetail(item)">查看详情</el-button>
        </div>

      </el-card>
    </div>

    <!-- 课程详情表单 -->
    <el-dialog title="车辆详情" :visible.sync="dialogVisible" width="50%">
      <el-form :model="selectedCar" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="车牌号：">
              <div class="car-info">{{ selectedCar.number }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车辆型号：">
              <div class="car-info">{{ selectedCar.brand }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆类型：">
              <div class="car-info">{{ selectedCar.model }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="购置日期：">
              <div class="car-info">{{ selectedCar.date }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆备注：">
              <div class="car-info">{{ selectedCar.remark }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车辆状态：">
              <div class="car-info">{{ selectedCar.state }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约时间：">
              <el-date-picker
                  v-model="selectedCar.reservationTime" type="date" placeholder="选择预约时间"
                  style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: center; align-items: flex-end;">
          <el-button type="primary" style="transform: scale(1.2);" v-if="selectedCar.state === '可预约'"
                     @click="handleReservation">预约</el-button>
        </div>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Car_reserve",

  // 组件的数据对象
  data() {
    return {
      car: [], // 存储所有车辆信息的数据数组
      searchNumber: "", // 用户输入的用于搜索的车牌号
      selectedCar: {reservationTime: null}, // 当前选中的车辆信息以及预约时间
      dialogVisible: false, // 控制车辆详情对话框的显示与隐藏
    };
  },
  // 计算属性，用于根据搜索条件过滤车辆信息
  computed: {
    filteredCar() {
      // 如果没有搜索车牌号，则返回所有车辆信息
      if (!this.searchNumber) {
        return this.car.sort((a, b) => (a.state === '可预约' ? -1 : 1) || (b.state === '可预约' ? 1 : -1));
      }
      // 根据车牌号进行过滤
      const filtered = this.car.filter(item =>
          item.number.includes(this.searchNumber)
      );
      // 将 '可预约' 状态的车辆排在前面
      return filtered.sort((a, b) => (a.state === '可预约' ? -1 : 1) || (b.state === '可预约' ? 1 : -1));
    }
  },
  // 组件创建时调用 loadCar 方法加载车辆信息
  created() {
    this.loadCar();
  },
  methods: {
    // 加载车辆信息的方法
    loadCar() {
      this.$request.get("/car/selectAll").then(res => {
        this.car = res.data; // 将获取到的数据赋值给 car 数组
      });
    },
    // 显示车辆详情的方法
    showDetail(item) {
      // 将选中的车辆信息复制到 selectedCar 对象中
      this.selectedCar = {...item};
      this.dialogVisible = true; // 显示详情对话框
    },
    // 高亮车牌号的方法
    highlightNumber(number) {
      if (!number || number.length < 6) return number;
      const prefix = number.substring(0, 2);
      const highlighted = `<span
style="color: red; border: 1px solid black;
font-size: 15px; margin-left: 5px;margin-right: 5px">${number.substring(2, 6)}</span>`;
      const suffix = number.substring(6);
      return prefix + highlighted + suffix;
    },

    // 处理预约的方法
    handleReservation() {
      // 检查是否选择了车辆以及预约时间
      if (!this.selectedCar.id) {
        this.$message.error('请选择要预约的车辆');
        return;
      }
      if (!this.selectedCar.reservationTime) {
        this.$message.error('请选择预约时间');
        return;
      }
      // 发送预约请求到服务器
      this.$request.post('/reserve/create', {
        content: this.selectedCar.number,
        description: `品牌: ${this.selectedCar.brand}, 型号: ${this.selectedCar.model}`,
        type: '车辆',
        state: '待审核',
        reserveTime: this.selectedCar.reservationTime, // 添加预约时间到请求数据中
      }).then(res => {
        if (res.code === '200') {
          this.$message.success('预约成功');
          this.dialogVisible = false; // 预约成功后关闭对话框
        } else {
          this.$message.error('预约失败: ' + res.msg); // 显示预约失败的错误信息
        }
      }).catch(error => {
        this.$message.error('预约发生错误: ' + error); // 显示预约过程中发生的错误
      });
    },
  }
};
</script>


<style scoped>
.car-info {
  font-size: 16px;
  color: #333;
}

.green-text {
  color: green;
  font-weight: bold;
}
.yellow-text {
  color: orange;
  font-weight: bold;
}
.red-text {
  color: red;
  font-weight: bold;
}
.carReserve-container {
  background:
      linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), /* 白色半透明遮罩让颜色变淡 */
      url('~@/assets/bg/carReserve.png') center/cover no-repeat;
}
</style>
